<template>
  <div>
    <div class="f-16 c_text2 mb-16 fw-6">通用设置</div>
    <div class="panelbox flex mb-16">
      <div class="flex">
        <div class="pt-10 mr-20">
          <el-switch v-model="switchType" inactive-color="#B4B4B4" ></el-switch>
        </div>
        <div class="flexcolumn r_box">
          <div class="f-14 c_text2 fw-6 mb-2">手机同步消红点</div>
          <div class="f-12 c_text3">
            开启后，点击在线聊天会话列表，会同步消除企微手机端的红点
          </div>
        </div>
      </div>
    </div>
    <div class="panelbox flex mb-16">
      <div class="flex">
        <div class="pt-10 mr-20">
          <el-switch v-model="switchType" inactive-color="#B4B4B4" ></el-switch>
        </div>
        <div class="flexcolumn r_box">
          <div class="f-14 c_text2 fw-6 mb-2">群发消息不新建会话</div>
          <div class="f-12 c_text3">
            开启后，通过系统“高级/极速群发”功能发送的消息，如果发送对象不在“在线聊天”会话列表中，不新建会话
          </div>
        </div>
      </div>
    </div>
    <div class="panelbox flex mb-16">
      <div class="flex">
        <div class="pt-10 mr-20">
          <el-switch v-model="switchType" inactive-color="#B4B4B4" ></el-switch>
        </div>
        <div class="flexcolumn r_box">
          <div class="f-14 c_text2 fw-6 mb-2">新消息提示音</div>
          <div class="f-12 c_text3">
            开启后，当接收到新消息，“在线聊天”窗口会发出提示音
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      switchType: false,
      keyword1: "",
      keyword2: "",
      jztags: ["11111"],
      mhtags: ["222"],
    };
  },
  methods: {
    getList() {
      this.loading = true;
      getsubUserList(this.queryParams).then((response) => {
        this.tableList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    handleAdd(type) {
      if (type == 1) {
        //精准关键词
        if (this.keyword1) {
          if (this.jztags.includes(this.keyword1)) {
            this.$message.warning("标签重复");
            return;
          }
          this.jztags.push(this.keyword1);
          this.keyword1 = "";
        }
      } else {
        //模糊关键词
        if (this.keyword2) {
          if (this.mhtags.includes(this.keyword2)) {
            this.$message.warning("标签重复");
            return;
          }
          this.mhtags.push(this.keyword2);
          this.keyword2 = "";
        }
      }
    },

    removeLable(index,type){
      if(type == 1){
        this.jztags.splice(index, 1);
      }else{
        this.mhtags.splice(index, 1);
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.panelbox {
  border-radius: 4px;
  border: 1px solid #e9e9e9;
  padding: 16px 16px 21px;
  background-color: #f0f0f0;
}
.r_box {
  flex: 1;
}
::v-deep .el-input-group__append {
  padding: 0 12px;
}
.mytag {
  position: relative;
  line-height: 24px;
  padding: 0 10px;
  font-weight: 400;
  color: #222;
  margin-right: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  margin-bottom: 8px;
  overflow: hidden;
  white-space: break-spaces;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-color: #5976ef transparent transparent;
    border-style: solid;
    border-width: 10px 10px 0 0;
  }
}
</style>